<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>Mobiscroll</title>
	<style type="text/css">
		body{
			padding:0;
			margin:0}
		.page{
			padding:0;
			width:320px;
			height:2000px;
			margin:0 auto;
			text-align:center;
			background-color:#CCC}
	</style>
    <!--Includes-->
	<script src="js/jquery.min.js"></script>
	<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
	<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {            
			   $('#time').val('').scroller('destroy').scroller({
				preset: 'date',//日期   其他参数(datetime,time)
				theme: 'android-ics',//皮肤样式  其他参数(android,android-ics light,android-ics,ios,jqm,sense-ui,wp light,wp)
				display: 'bottom', //显示方式  其他参数(modal,inline,bubble,top,bottom)
				mode: 'clickpick',//日期选择模式  其他参数(scroller,mixed )
				dateFormat: 'yy-mm-dd', //  其他参数(日期格式)
				setText: '确定', //确认按钮名称
				cancelText: '取消',//取消按钮名籍我
				dateOrder: 	'yymmdd', //面板中日期排列格式
				dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
				startYear:1950,//开始年份
				endYear:2020 //结束年份
				});
        });
    </script>
</head>

<body>
<div class="page">&nbsp;
	<div data-role="header" data-position="inline" data-backbtn="false">
	<h1>预约试驾</h1>
	</div><!-- /header -->
	<div class="content">
				请选择试驾日期：<br/>
				<input type="text" id="time" />
	</div>
	<button id="yes">确定</button>
	<script type="text/javascript">
		$("#yes").on("click",function(){
			console.log($("#time").val())
		})
	</script>
</div>     
</body>
</html>
